window.addEventListener("load", function () {
	//功能二,渲染数据
	//1.获取后台数据
	const apiData = [
		{ times: 4000, price: 1200, unitPrice: "0.3000" },
		{ times: 8000, price: 2000, unitPrice: "0.2500" },
		{ times: 40000, price: 8000, unitPrice: "0.2000" },
	];
	//2.后台数据进行遍历,拿到的是一个数组元素
	apiData.forEach(function (v) {
		//拿到我们要拼接的li节点
		$(
			"#numTab"
		).innerHTML += `<li data-price=${v.price} data-unitPrice=${v.unitPrice}>${v.times}</li>`;
		// console.log($("#numTab"));
	});
	// 3.默认进去看到是第一个索引显示
	$("#numTab li")[1].classList.add("active"); //400显示,颜色加边框
	//功能三默认显示第一个
	$("#jiaoge").innerHTML = `<strong>&yen; ${apiData[0].price}</strong>
	${apiData[0].unitPrice}元一次),仅限实名购买`;
	// 功能一:点击激活样式
	$("#numTab li").forEach(function (v, i) {
		if (!(i === 0)) {
			v.addEventListener("click", function () {
				$("#numTab li").forEach(function (itme) {
					itme.classList.remove("active");
				});
				this.classList.add("active");
				// 功能三:点击按钮,在下方联动生成对应的价格属性
				$("#jiaoge").innerHTML = ` <strong>&yen; ${this.dataset.price}</strong>
				(约${this.dataset.unitprice}元一次),仅限实名购买`;
				// console.log(this.dataset);
				// 滴二种方法
				// $("#jiaoge strong").innerHTML = `&yen;${apiData[i - 1].price}`;
			});
		}
	});
});
//功能四获取相关节点
$('#interface>div')[0].style.display='block' //默认显示第一个页面

$("#tabList li").forEach(function (v,i) {
	v.addEventListener("click", function () {
		$("#tabList li").forEach(function (item,inted) {
			item.classList.remove("active");
			// 功能五获取四个div索引全部隐藏
			$('#interface>div')[inted].style.display='none'
		});
		this.classList.add("active");
		//功能五
		$('#interface>div')[i].style.display='block'
		
	});
});
//功能五点击那个那个显示
// $('#interface>div')
// console.log($('#interface>div'));







// 功能三,精灵图点击回到顶部
const returnList = document.querySelector("#Return");
returnList.addEventListener("click", function () {
	//2.点击后回到顶部
	// console.log(11);
	window.scrollTo({
		left: 0,
		top: 0,
		// 缓慢上去
		behavior: "smooth",
	});
});
const config = {
	selector: "#bannerBg",
	vx: 4, //小球x轴速度,正为右，负为左
	vy: 4, //小球y轴速度
	height: 2, //小球高宽，其实为正方形，所以不宜太大
	width: 2,
	count: 100, //点个数
	color: "#000", //点颜色
	stroke: "0,0,0,", //线条颜色
	dist: 6000, //点吸附距离
	e_dist: 20000, //鼠标吸附加速距离
	max_conn: 10, //点到点最大连接数
};
CanvasParticle(config);
